<template>
  <div class="mod-info">
    <!-- <el-row> -->
    <!-- <el-col :span="6"> -->
    <div class="grid-content bg-purple-dark overWidth">
      <el-form
        ref="form"
        :model="form"
        :rules="dataRule"
        label-width="200px"
        class="demo-ruleForm"
      >
        <div class="title">区域代理设置</div>
        <el-form-item label="是否开启区域代理">
          <el-switch
            v-model="form.open_payment"
            active-color="#13ce66"
            inactive-color="#ccc"
          >
          </el-switch>
          <span style="margin-left: 20px; color: red"
            >(注意：关闭后会屏蔽APP端事件功能的显示，积分转赠功能的显示，主要方便IOS审核)</span
          >
        </el-form-item>
        <div class="title">评论设置</div>
        <el-form-item label="是否开启默认评论">
          <el-switch
            v-model="form.comment_open"
            active-color="#13ce66"
            inactive-color="#ccc"
          >
          </el-switch>
        </el-form-item>
        <div v-if="form.comment_open">
          <el-form-item label="买家交易成功" prop="auto_comment_process_days">
            <el-row>
              <el-col :span="24" class="flexcenter">
                <el-input-number
                  :precision="0"
                  v-model="form.auto_comment_process_days"
                  :min="7"
                  :max="30"
                ></el-input-number>
                <div class="colorText">
                  <span>天后买家未评价，系统默认评价</span>
                  <span>（最小7天，最大30天）</span>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="默认评价内容" prop="default_comment">
            <el-row>
              <el-col :span="8">
                <el-input v-model="form.default_comment"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </div>
        <div class="title">订单流程设置</div>

        <el-form-item label="未支付订单" prop="delay_days">
          <el-row>
            <el-col :span="8" class="flexcenter">
              <el-input-number
                :precision="0"
                style="width: 150px"
                v-model="form.delay_days"
                :min="0"
                :max="7"
                size="large"
              ></el-input-number>
              <div class="colorText">天(0-7)</div>
            </el-col>
            <el-col :span="8" class="flexcenter">
              <el-input-number
                :precision="0"
                style="width: 150px"
                v-model="form.delay_hours"
                :min="0"
                :max="23"
                size="large"
              ></el-input-number>
              <div class="colorText">小时(0-23)</div>
            </el-col>
            <el-col :span="8" class="flexcenter">
              <el-input-number
                :precision="0"
                style="width: 150px"
                v-model="form.delay_minutes"
                :min="10"
                :max="59"
                size="large"
              ></el-input-number>
              <div class="colorText">分钟(10-59)</div>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="已发货订单" prop="auto_receipt_process_days">
          <el-row>
            <el-col :span="24" class="flexcenter">
              <el-input-number
                :precision="0"
                v-model="form.auto_receipt_process_days"
                :min="3"
                :max="30"
              ></el-input-number>
              <div class="colorText">天后自动确认收货(3-30天)</div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="已收货订单" prop="auto_close_rights_process_days">
          <el-row>
            <el-col :span="24" class="flexcenter">
              <el-input-number
                :precision="0"
                v-model="form.auto_close_rights_process_days"
                :min="3"
                :max="30"
              ></el-input-number>
              <div class="colorText">天后关闭退款、退货功能(3-30天)</div>
            </el-col>
          </el-row>
        </el-form-item>
        <div>
          <div class="title">售后流程设置</div>
          <el-form-item
            label="买家发起退款申请"
            prop="apply_return_auto_process_days"
          >
            <el-row>
              <el-col :span="24" class="flexcenter">
                <el-input-number
                  :precision="0"
                  v-model="form.apply_return_auto_process_days"
                  :min="3"
                  :max="30"
                ></el-input-number>
                <div class="colorText">
                  天后商家未处理，系统自动同意退款(3-30天)
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item
            label="买家发起退货申请"
            prop="apply_refund_auto_process_days"
          >
            <el-row>
              <el-col :span="24" class="flexcenter">
                <el-input-number
                  :precision="0"
                  v-model="form.apply_refund_auto_process_days"
                  :min="3"
                  :max="30"
                ></el-input-number>
                <div class="colorText">
                  天后商家未处理，系统自动同意退货(3-30天)
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item
            label="卖家同意退货后"
            prop="agree_return_auto_process_days"
          >
            <el-row>
              <el-col :span="24" class="flexcenter">
                <el-input-number
                  :precision="0"
                  v-model="form.agree_return_auto_process_days"
                  :min="3"
                  :max="30"
                ></el-input-number>
                <div class="colorText">
                  天后买家未处理，系统自动拒绝售后（3-30天）
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="买家已退货后" prop="returned_auto_process_days">
            <el-row>
              <el-col :span="24" class="flexcenter">
                <el-input-number
                  :precision="0"
                  v-model="form.returned_auto_process_days"
                  :min="3"
                  :max="30"
                ></el-input-number>
                <div class="colorText">
                  天后商家未处理，系统自动确认收货(3-30天)
                </div>
              </el-col>
            </el-row>
          </el-form-item>
        </div>

        <div v-if="false">
          <div class="title">积分配置</div>
          <el-form-item label="捐赠兑换比例：" prop="donation_exchange_ratio">
            <div class="itemCls">
              <el-input-number
                :precision="0"
                v-model="form.donation_exchange_ratio"
                :min="0"
              ></el-input-number>
              <div class="lab">倍公益积分</div>
              <div class="tig">
                （包括在线捐款、捐物，官方渠道捐款、捐物价值兑换公益积分的比例，默认1:1.2）
              </div>
            </div>
          </el-form-item>
          <el-form-item
            label="服务积分兑换比例："
            prop="service_points_exchange_ratio"
          >
            <div class="itemCls">
              <div>
                <el-input-number
                  :precision="0"
                  v-model="form.service_points_exchange_ratio"
                  :min="0"
                ></el-input-number>
              </div>
              <div class="lab">倍公益积分或提现现金</div>
              <div class="tig">(默认1:1)</div>
            </div>
          </el-form-item>
          <el-form-item label="爱心值兑换比例：" prop="love_value">
            <div class="itemCls">
              <div>
                <el-input-number
                  :precision="0"
                  v-model="form.love_value"
                  :min="0"
                ></el-input-number>
              </div>
              <div class="lab">爱心值 兑</div>
              <div>
                <el-input-number
                  :precision="0"
                  v-model="form.public_welfare_integral"
                  :min="0"
                ></el-input-number>
              </div>
              <div class="lab">公益积分</div>
              <div class="tig">(默认5:1)</div>
            </div>
          </el-form-item>

          <el-form-item label="公益积分使用比例：" prop="integral_use_ratio">
            <div class="itemCls">
              <div>
                <el-input-number
                  :precision="0"
                  v-model="form.integral_use_ratio"
                  :min="0"
                ></el-input-number>
              </div>
              <div class="lab">%</div>
              <div class="tig">（即订单支付时，最多可使用公益积分的比例）</div>
            </div>
          </el-form-item>

          <el-form-item
            label="公益捐款比例（平台店）："
            prop="contribution_ratio_platform"
          >
            <div class="itemCls">
              <div>
                <el-input-number
                  :precision="1"
                  v-model="form.contribution_ratio_platform"
                  :min="0"
                ></el-input-number>
              </div>
              <div class="lab">%</div>
              <div class="tig">
                （订单完成后，平台店铺订单的每笔的捐赠比例）
              </div>
            </div>
          </el-form-item>
          <el-form-item
            label="公益捐款比例（三方点）："
            prop="contribution_ratio_thirdparty"
          >
            <div class="itemCls">
              <div>
                <el-input-number
                  :precision="1"
                  v-model="form.contribution_ratio_thirdparty"
                  :min="0"
                ></el-input-number>
              </div>
              <div class="lab">%</div>
              <div class="tig">
                （订单完成后，第三方店铺订单的每笔的捐赠比例）
              </div>
            </div>
          </el-form-item>
        </div>

        <div>
          <div class="title">月权益设置</div>
          <el-form-item label="月权益百分比" prop="equity_percentage">
            <el-row>
              <el-col :span="24" class="flexcenter">
                <el-input-number
                  v-model="form.equity_percentage"
                  :min="0"
                  :step="0.01"
                  :precision="2"
                  placeholder="请输入"
                ></el-input-number>
                <div class="colorText">%</div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="月权益调整值" prop="equity_trim_value">
            <el-row>
              <el-col :span="24" class="flexcenter">
                <el-input-number
                  :precision="0"
                  v-model="form.equity_trim_value"
                ></el-input-number>
                <div class="colorText"></div>
              </el-col>
            </el-row>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">提 交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- </el-col> -->
    <!-- </el-row> -->
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
export default {
  data() {
    return {
      form: {
        comment_open: false, // 是否开启商品自动评论
        open_payment: false, // 是否开启小程序支付
        auto_comment_process_days: 7, // 买家交易成功多少天后买家未评论，系统将自动评论默认7天(7-30天)
        default_comment: '默认好评', // 系统评论内容为  用户超时未评，系统自动好评
        delay_days: 0, // 支付延时配置
        delay_hours: 0, // 支付延时配置（小时数，最大23小时）
        delay_minutes: 10, // 付延时配置（分钟数，最小10分，最大59分钟），
        auto_receipt_process_days: null, // 已发货订单,多少天后自动确认收货（最小10天，最大30天）
        auto_close_rights_process_days: null, // 维权最后天数最小是15天，维权最后天数最大是30天
        apply_return_auto_process_days: null, // 买家发起退款申请多少天后商家未处理，系统将自动同意，默认3天(3-30天)
        apply_refund_auto_process_days: null, // 买家发起退货退款申请多少天后商家未处理，系统将自动同意维权，默认3天(3-30天)
        agree_return_auto_process_days: null, // 商家同意退货多少天后买家未处理，系统将自动拒绝维权，默认3天(3-30天)
        returned_auto_process_days: null, // 买家已退货(退货填单)多少天后商家未处理，系统将自动收货。默认3天(3-30天)
        donation_exchange_ratio: 2,
        service_points_exchange_ratio: 2,
        love_value: 5,
        public_welfare_integral: 1,
        integral_use_ratio: 11,
        contribution_ratio_platform: 9,
        contribution_ratio_thirdparty: 6,
        equity_percentage: 0,
        equity_trim_value: 0
      },
      dataRule: {
        auto_comment_process_days: [
          {
            required: true,
            message: '买家交易成功时间不能为空',
            trigger: 'blur'
          }
        ],
        delay_days: [
          {
            required: true,
            message: '未支付订单时间不能为空',
            trigger: 'blur'
          }
        ],
        delay_hours: [
          {
            required: true,
            message: '上级菜单不能为空',
            trigger: 'blur'
          }
        ],
        delay_minutes: [
          {
            required: true,
            message: '菜单名称不能为空',
            trigger: 'blur'
          }
        ],
        auto_receipt_process_days: [
          {
            required: true,
            message: '已发货订单确认收货时间不能为空',
            trigger: 'blur'
          }
        ],
        auto_close_rights_process_days: [
          {
            required: true,
            message: '已收货订单关闭退款、退货时间不能为空',
            trigger: 'blur'
          }
        ],
        apply_return_auto_process_days: [
          {
            required: true,
            message: '买家发请退款申请时间不能为空',
            trigger: 'blur'
          }
        ],
        apply_refund_auto_process_days: [
          {
            required: true,
            message: '买家发请退货申请时间不能为空',
            trigger: 'blur'
          }
        ],
        agree_return_auto_process_days: [
          {
            required: true,
            message: '卖家同意退货后未处理，系统自动拒绝售后时间不能为空',
            trigger: 'blur'
          }
        ],
        returned_auto_process_days: [
          {
            required: true,
            message: '买家已退货后未处理，系统自动确认收货时间不能为空',
            trigger: 'blur'
          }
        ],
        donation_exchange_ratio: [
          {
            required: true,
            message: '请输入捐赠兑换比例',
            trigger: 'blur'
          }
        ],
        service_points_exchange_ratio: [
          {
            required: true,
            message: '请输入服务积分兑换比例',
            trigger: 'blur'
          }
        ],
        love_value: [
          {
            required: true,
            message: '请输入爱心值兑换比例爱心值',
            trigger: 'blur'
          }
        ],
        public_welfare_integral: [
          {
            required: true,
            message: '请输入爱心值兑换比例公益积分',
            trigger: 'blur'
          }
        ],
        integral_use_ratio: [
          {
            required: true,
            message: '请输入公益积分使用比例',
            trigger: 'blur'
          }
        ],
        contribution_ratio_platform: [
          {
            required: true,
            message: '请输入公益捐款比例（平台店）',
            trigger: 'blur'
          }
        ],
        contribution_ratio_thirdparty: [
          {
            required: true,
            message: '请输入公益捐款比例（三方点）',
            trigger: 'blur'
          }
        ],
        equity_percentage: [
          {
            required: true,
            message: '请输入月权益百分比',
            trigger: 'blur'
          }
        ],
        equity_trim_value: [
          {
            required: true,
            message: '请输入月权益调整值',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      seviceApi.getconfigSave().then((res) => {
        if (res && res.data.code == 200) {
          if (res.data.data) {
            this.form = res.data.data
          }
        }
      })
    },
    // 提交
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (!this.form.public_welfare_integral) {
            this.$message.error('请输入爱心值兑换比例公益积分')
            return false
          }
          this.form.comment_open = this.form.comment_open != 0
          seviceApi.postSaleconfigSave(this.form).then((res) => {
            if (res && res.data.code == 200) {
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.getInfo()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 30px;
}

.text-center {
  text-align: center;
}

.c-ff0000 {
  color: #ff0000;
}

.flexcenter {
  display: flex;
  align-items: center;
}

.colorText {
  color: #999;
  font-size: 14px;
  margin-left: 10px;
}

.itemCls {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  > div {
    margin: 0 5px;
  }

  > .tig {
    color: #6d6d6d;
  }
}
</style>
